<template>
  <a-card title="菜单管理" :bordered="false">
    <z-crud
      @on-load="loadData"
      :option="option"
      :table-loading="loading"
      :data="list"
      @on-save="onSave"
      @on-del="onDel"
      @on-update="onUpdate"
    >
      <template #keepAlive="{ record }">
        <!-- {{ record.keepAlive }} -->
        <a-tag color="success" v-if="record.keepAlive">开启</a-tag>
        <a-tag color="warning" v-else>关闭</a-tag>
      </template>

      <template #icon="{ record }">
        <MyIcon :type="record.icon" style="font-size: 18px" />
      </template>

      <template #keepAliveViewForm="{ record }">
        <a-tag color="success" v-if="record.keepAlive">开启</a-tag>
        <a-tag color="warning" v-else>关闭</a-tag>
      </template>
    </z-crud>
  </a-card>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { getMenusTree, addMenus, updateMenus, deleteMenus } from '../../api/menus';

import { message } from 'ant-design-vue';
export default defineComponent({
  setup() {
    const option = ref<object>({
      refreshBtn: true,
      operation: true,
      bordered: true,
      addBtn: true,
      editBtn: true,
      delBtn: true,
      viewBtn: true,
      align: 'left',
      labelSpan: 6,
      column: [
        {
          title: '菜单名称',
          dataIndex: 'title',
          key: 'title',
          rules: [
            {
              required: true,
              message: '请填写菜单名',
              trigger: 'blur',
            },
          ],
        },
        {
          title: '路由名称',
          dataIndex: 'name',
          key: 'name',
          rules: [
            {
              required: true,
              message: '请填写路由名称',
              trigger: 'blur',
            },
          ],
        },
        {
          title: '父级菜单',
          dataIndex: 'parentId',
          key: 'parentId',
          hide: true,
          type: 'treeSelect',
          treeData: [],
          replaceFields: { value: 'id', key: 'id' },
          placeholder: '请填写父级菜单',
          rules: [
            {
              required: true,
              message: '请填写父级菜单',
              trigger: 'change',
              type: 'number',
            },
          ],
        },
        {
          title: '页面路径',
          dataIndex: 'path',
          key: 'path',
          rules: [
            {
              required: true,
              message: '请填写页面路径',
              trigger: 'blur',
            },
          ],
        },
        {
          title: '图标',
          dataIndex: 'icon',
          key: 'icon',
          type: 'iconSelect',
          slot: true,
        },
        {
          title: '组件地址',
          dataIndex: 'component',
          key: 'component',
          // rules: [
          //   {
          //     required: true,
          //     message: "请填写组件地址",
          //     trigger: "blur",
          //   },
          // ],
        },
        {
          title: '是否开启缓存',
          dataIndex: 'keepAlive',
          key: 'keepAlive',
          slot: true,
          viewFormSlot: true,
          type: 'switch',
        },
      ],
    });
    const loading = ref<boolean>(false);
    const list = ref<object[]>([]);
    const loadData = async () => {
      loading.value = true;
      const { data } = await getMenusTree();
      loading.value = false;
      list.value = data;

      option.value.column[2].treeData = [{ id: -1, title: '无' }, ...list.value];
    };
    const onSave = async (params, done) => {
      try {
        params.keepAlive = +params.keepAlive;
        await addMenus(params);
        message.success('操作成功');
        done();
        loadData();
      } catch (error) {
        done();
      }
    };

    const onUpdate = async (params, done) => {
      try {
        params.keepAlive = +params.keepAlive;
        await updateMenus(params);
        message.success('操作成功');
        done();
        loadData();
      } catch (error) {
        done();
      }
    };

    const onDel = async (record, done) => {
      deleteMenus(record.id).then(res => {
        message.success('操作成功');
        done();
        loadData();
      });
    };
    return {
      onUpdate,
      onSave,
      onDel,
      loadData,
      option,
      list,
      loading,
    };
  },
});
</script>